/*
 * 这个文件用来定义项目打包规则
 */

let {
	src,
	dest,
	parallel,
	watch
} = require('gulp');
// 引入插件
// html
let minhtmltool = require('gulp-htmlmin'); 
// css
let minclasstool = require("gulp-clean-css"); 
// js
let minjstool = require("gulp-uglify"); 
// ec6转ec5
let babel = require("gulp-babel"); 
// scss
let sass = require("gulp-sass"); 
// 浏览器实时刷新
let browser = require("browser-sync").create(); 
// 添加浏览器前缀gulp-autoprefixer
let autoprefixer = require("gulp-autoprefixer"); 
// img 或者使用 gulp-tinypng,有数量限制
let imagemin = require("gulp-imagemin"); 
// 自动清除js里面的console.log语句
let clearDebug = require("gulp-strip-debug");
// 给静态资源添加版本号，防止浏览器读缓存 (gulp-asset-rev)
// 注意，添加版本号只需要添加到压缩HTML配置函数里面即可
let asset = require("gulp-asset-rev");
// 去掉严格模式,一般不需要
// babel-plugin-transform-remove-strict-mode
// 在.babelrc文件里面定义即可，如下：
// {
//      "presets": ["env"],
//      "plugins": ["transform-remove-strict-mode"]    *
//  }

// 定义目录常量
// 入口文件
let enterDir = "src",
	enterhtml = enterDir,
	entercss = enterDir + "/css",
	enterscss = enterDir + "/scss",
	enterjs = enterDir + "/js",
	enterimgs = enterDir + "/imgs";
// 出口文件
let outputDir = "dist",
	outputhtml = outputDir,
	outputcss = outputDir + "/css",
	outputscss = outputDir + "/scss",
	outputjs = outputDir + "/js",
	outputimgs = outputDir + "/imgs";
// 定义压缩HTML的规则
function minhtml() {
	src(enterhtml + '/**/*.html') // 要压缩的文件地址
		.pipe(minhtmltool({
			collapseWhitespace: true
		})) // 引用插件，压缩成一行
		.pipe(asset())
		.pipe(dest(outputDir)) // 输出到这个文件，文件名自己定义
}
// 定义压缩CSS的规则
function mincss() {
	src(entercss + '/**/*.css')
		.pipe(minclasstool())
		.pipe(dest(outputcss))
}
// 定义压缩js的规则,注意要在压缩js之前先将EC6转为es5
function jsuglify() {
	src(enterjs + '/**/*.js')
		.pipe(clearDebug())
		.pipe(babel())
		.pipe(minjstool())
		.pipe(dest(outputjs))
}
// 定义压缩图片的规则
function minimage() {
	src(enterimgs + "/**/*.{jpg,png,gif,ico}")
		.pipe(imagemin())
		.pipe(dest(outputimgs))
}
// 定义压缩scss的规则,scss转css
function scss() {
	src(enterscss + '/**/*.scss')
		.pipe(sass())
		.on('error', function(err) { // 解决编译出错，监听被阻断的问题
			console.log('scss Error!', err.message);
			this.end();
		})
		.pipe(autoprefixer({ // 自动添加浏览器前缀
			browsers: ['last 50 versions', 'Android >= 3.0'],
			cascade: true, //是否美化属性值 默认：true 像这样：
			//-webkit-transform: rotate(45deg);
			//        transform: rotate(45deg);
			remove: true //是否去掉不必要的前缀 默认：true 
		}))
		.pipe(dest(entercss))
}
// 一键开发环境 (gulp start)
var reload = browser.reload;
exports.start = parallel(function() {
	// browser开启本地web服务环境
	browser.init({
		port: 8080, // 定义端口号
		server: {
			baseDir: enterDir, //入口文件的基础目录
			index: "./index.html"
		}
	});
	// 实时监听文件并自动刷新
	watch(enterscss + "/**/*.scss").on("change", scss); // 实时监听scss文件并转换为CSS
	watch(entercss + "/**/*.css").on("change", reload);
	watch(enterhtml + "/**/*.html").on("change", reload);
	watch(enterjs + "/**/*.js").on("change", reload);
});

// 一键打包 (gulp build)
exports.build = parallel(minhtml, mincss, jsuglify, minimage);